<template>
	<view class="blind_box_record">
		<uv-navbar leftIcon="arrow-leftward" leftIconColor="#FFF" placeholder autoBack bgColor="#161714">
			<template v-slot:center>
				<view class="center_slot">开盒记录</view>
			</template>
		</uv-navbar>
		<scroll-view scroll-x class="scroll_box">
			<view class="item active" v-for="item in 10">
				<view class="cover">
					<image src="@/static/test/1.jpg"></image>
				</view>
				<view class="name">RR盲盒RR盲盒RR盲盒RR盲盒RR盲盒</view>
				<view class="label">
					<view>已开23次</view>
				</view>
			</view>
		</scroll-view>
		<view class="title">
			<view class="key">开盒记录</view>
			<view class="sort">
				<text>全部</text>
				<image src="@/static/images/d1.png"></image>
			</view>
		</view>
		<view class="content">
			<scroll-view scroll-y class="scroll_view">
				<view class="header">
					<view class="id">ID</view>
					<view class="time">时间</view>
					<view class="nft">NFT</view>
				</view>
				<view class="list">
					<view class="item" v-for="item in 99">
						<view class="id">1001</view>
						<view class="time">2021/7/18 01:02:08</view>
						<view class="nft">皮肤1皮肤1皮肤1皮肤1皮肤1皮肤1皮肤1皮肤1</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
</script>

<style scoped lang="scss">
	.blind_box_record {
		.center_slot {
			color: #FFFFFF;
			font-size: 14px;
			font-weight: 800;
		}

		.scroll_box {
			height: 326rpx;
			padding-top: 30rpx;
			padding-left: 30rpx;
			box-sizing: border-box;
			white-space: nowrap;

			.item {
				display: inline-block;
				margin-right: 20rpx;

				&:last-child {
					margin-right: 0;
				}

				&.active {
					.cover {
						border: 2px solid #DDF247;
						box-sizing: border-box;
					}
				}

				.cover {
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 131rpx;
						height: 108rpx;
					}
				}

				.name {
					max-width: 200rpx;
					text-align: center;
					color: #FFFFFF;
					font-size: 28rpx;
					font-weight: 800;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					padding: 20rpx 0 12rpx;
					box-sizing: border-box;
				}

				.label {
					display: flex;
					justify-content: center;

					view {
						max-width: 100rpx;
						height: 36rpx;
						line-height: 36rpx;
						text-align: center;
						color: #FFFFFF;
						font-size: 20rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						border-radius: 3rpx;
						padding: 0 10rpx;
						box-sizing: border-box;
						background: rgba(255, 255, 255, 0.2);
					}
				}
			}
		}

		.title {
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;

			.key {
				color: #FFFFFF;
				font-size: 32rpx;
				font-weight: bold;
				padding-left: 18rpx;
				box-sizing: border-box;
				position: relative;

				&::after {
					content: "";
					width: 3rpx;
					height: 30rpx;
					background: #DDF247;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					z-index: 2;
				}
			}

			.sort {
				display: flex;
				align-items: center;

				text {
					color: #999999;
					font-size: 28rpx;
					padding-right: 14rpx;
					box-sizing: border-box;
				}

				image {
					width: 28rpx;
					height: 28rpx;
				}
			}
		}

		.content {
			padding: 0 20rpx;
			box-sizing: border-box;

			.scroll_view {
				height: calc(100vh - #{$navBarHeight} - 326rpx - 92rpx - var(--window-top) - var(--window-bottom));
				border-radius: 20rpx;
				padding: 20rpx 0rpx;
				box-sizing: border-box;
				background: #2F2F2F;

				.header {
					color: #FFFFFF;
					font-size: 28rpx;
					font-weight: bold;
					padding: 10rpx 30rpx;
					box-sizing: border-box;
					display: flex;

					.id {
						width: 160rpx;
					}

					.time {
						flex: 1;
					}

					.nft {
						flex: 1;
						text-align: right;
					}
				}

				.list {
					padding: 10rpx 30rpx;
					box-sizing: border-box;

					.item {
						height: 95rpx;
						color: #999999;
						font-size: 24rpx;
						font-weight: bold;
						border-bottom: 1px solid #42433F;
						padding: 10rpx 0;
						box-sizing: border-box;
						display: flex;
						align-items: center;

						.id {
							width: 160rpx;
						}

						.time {
							flex: 1;
						}

						.nft {
							flex: 1;
							text-align: right;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
							padding-left: 10rpx;
							box-sizing: border-box;
						}
					}
				}
			}
		}

	}
</style>